<template>
    <div class="side g_p">
        <div class="sideItem tabbarActive">
            <div class="iconfont icon-shouye"></div>
            <div class="sidetitle">首页</div>
        </div>
        <div class="sideItem">
            <div class="iconfont icon-gouwuchekong"></div>
            <div class="sidetitle">购物车</div>
        </div>
        <div class="sideItem">
            <div class="iconfont icon-dingdan"></div>
            <div class="sidetitle">订单</div>
        </div>
        <div class="sideItem">
            <div class="iconfont icon-iconfuzhi"></div>
            <div class="sidetitle">我的</div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
    .side{
        .tabbarActive{
            color: #1FA4FC;
        }
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        background: #fff;
        box-shadow: 0 -1px 1px 0 #F1F1F1;
        height: .49rem;
        width: 100%;
        box-sizing: border-box;
        .sideItem{
            flex:1;
            text-align:center;
            .iconfont{
                margin: .07rem 0 .02rem 0;
                 font-size: .18rem;
            }
            .sidetitle{
                font-size: 20px;
                transform: scale(0.5,0.5);
                transform-origin: center top;
            }
        }
    }
        
</style>